<template>
	<div class="containerChildrenTable">
		<el-row v-for="item in list.children" :key="item.id" class="lineBottom">
			<el-col :span="5">
				<el-tag type="success" @close="remove(scopeData.id, item.id)" closable
					>{{ item.authName }}
				</el-tag>
				<i class="el-icon-caret-right"></i>
			</el-col>
			<el-col :span="19" class="colChildren">
				<el-row
					v-for="itemChild in item.children"
					:key="itemChild.id"
					class="rowChildren"
				>
					<el-col :span="6">
						<el-tag @close="remove(scopeData.id, itemChild.id)" closable
							>{{ itemChild.authName }}
						</el-tag>
						<i class="el-icon-caret-right"></i>
					</el-col>
					<el-col :span="18">
						<el-row v-for="lastChild in itemChild.children" :key="lastChild.id">
							<el-col>
								<el-tag
									type="warning"
									closable
									@close="remove(scopeData.id, lastChild.id)"
									>{{ lastChild.authName }}
								</el-tag>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	name: 'ChildrenTable',
	props: ['scopeData'],
	data() {
		return {
			list: this.scopeData,
		}
	},
	created(){
		
	},
	mounted() {},
	methods: {
		remove(roleId, rightId) {
			this.$confirm('此操作将永久删除该权限?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
			})
				.then(() => {

					this.$http
						.delete(`/roles/${roleId}/rights/${rightId}`)
						.then(response => {
							const { data, meta } = response.data
							if (meta.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功！',
								})
								this.list.children = data
							} else {
								this.$message.error('删除失败!')
							}
						})
				})
				.catch(error => {
					console.log(error.message)
				})
		},
	},
}
</script>

<style scoped>
.containerChildrenTable {
	margin: 6px 0 6px 21px;
}
.containerChildrenTable .el-row:nth-child(n) {
	padding: 15px;
}
i {
	margin-left: 6px;
}
.colChildren .rowChildren {
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}
.colChildren .rowChildren:last-child {
	border-bottom: none;
}
.lineBottom {
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}
</style>
